<template>
    <div class="detail">
        <h3>{{ isAdd ? '新增' : '修改' }}</h3>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150">
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model.trim="ruleForm.name" :maxlength="20" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单英文名称" prop="enName">
                        <el-input v-model.trim="ruleForm.enName" :maxlength="50" clearable/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="50">
                <el-col :span="12">
                    <el-form-item label="菜单类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择" clearable style="width:100%;" @change="changeType">
                            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                
            </el-row>
            <el-row :gutter="50" v-if="ruleForm.type === '2' || ruleForm.type === '3'">
                <el-col :span="12">
                    <el-form-item label="菜单路径" prop="path">
                        <el-input v-model.trim="ruleForm.path" :maxlength="20" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="对应组件" prop="file">
                        <el-input v-model.trim="ruleForm.file" :maxlength="50" clearable/>
                    </el-form-item>
                </el-col>
            </el-row>
            <div style="display: flex;justify-content: center;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    Create
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </div>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import {  FormInstance ,FormRules} from 'element-plus';

defineProps({
    isAdd:Boolean,
    nodeDetail:Object
})
interface RuleForm {
    name:string
    enName:string
    type:string
    path:string
    file:string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name:'',
    enName:'',
    type:'',
    path:'',
    file:''
})
const rules = reactive<FormRules<RuleForm>>({
    name:[
        {
            required:true,
            message:'请输入',
            trigger:'blur'
        }
    ],
    enName:[
        {
            required:true,
            message:'请输入',
            trigger:'blur'
        }
    ],
    type:[
        {
            required:true,
            message:'请选择',
            trigger:'change'
        }
    ],
    path:[
        {
            required:false,
            message:'请输入',
            trigger:'blur'
        }
    ],
    file:[
        {
            required:false,
            message:'请输入',
            trigger:'blur'
        }
    ],
})
watch(
    () => ruleForm.type,
    () => {
        rules.path = [
            {
                required:ruleForm.type === '2' || ruleForm.type === '3',
                message:'请输入',
                trigger:'blur'
            }
        ]
        rules.file = [
            {
                required:ruleForm.type === '2',
                message:'请输入',
                trigger:'blur'
            }
        ]
        if(ruleForm.type === '1'){
            ruleForm.path = ''
            ruleForm.file = ''
        }else if(ruleForm.type === '3'){
            ruleForm.file = ''
        }
    }
);
const typeList = [
    {
        label:'节点',
        value:'1'
    },
    {
        label:'布局',
        value:'2'
    },
    {
        label:'链接',
        value:'3'
    }
]
const changeType = () => {
    console.log(ruleForm.type)
    console.log(typeof ruleForm.type)
}
const submitForm = async (formEl:FormInstance | undefined) => {
    if(!formEl) return;
    let flag = true
    await formEl.validate((valid: any) => {
        if(!valid) {
            flag = false
            console.log('校验不通过')
        }
    })
    if(flag) console.log('可以整理参数发请求了')
}
const resetForm = (formEl:FormInstance | undefined) => {
    if(!formEl) return;
    formEl.resetFields()
}
</script>
<style lang="scss" scoped>
    .detail {
        padding:20px;
    }
</style>